<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

    <xsl:strip-space elements="*"/>

    <xsl:output method="html" indent="no"/>

    <xsl:template match="//tree">
        <style type="text/css">
            <![CDATA[

                 		.dir {
                 		    margin:2px;
                 		    color:#ceeffe;
                            border:2px outset #336699;

                            overflow:hidden;
                 		}

                       .dirLabel {
                            display:block;
                 		    font:normal 16px verdana;
                            background-color:#6666aa;

                 		    cursor:pointer;
                 		    padding:2px;
                        }

                        .dirLabelOn {
                           background-color:#6699cc;
                        }

                 		.dirLink {
                 		    display:block;
                 		    color:#aaaaaa;
                 		    font:normal 10px verdana;
                 		    padding-left:5px;
                 		    text-decoration:none;
                 		}

                 		.dirLink:hover {
                           background-color:#3333aa;
                        }

                        .dirCont{

                        }

                        .hide {
                            display:none;
                        }

                        .show {
                            display:block;
                 		    padding-left:10px;
                        }
                  ]]>
        </style>
        <script>
            <![CDATA[


                var dirCollapse = "dirCont hide";
                var dirExpand = "dirCont show";

                var dirLabel = "dirLabel";
                var dirLabelOn = "dirLabel dirLabelOn";

                var dir = "dir";
                var dirOn = "dir borderOn";


                function getChildren(folder) {
                    if (folder.children != null) {
                        return folder.children;
                    } else {
                        return folder.childNodes;
                    }
                }
                function getSiblings(folder) {
                    return getChildren(folder.parentNode);
                }
                function getFolderChildByTagname(folder, tagname) {
                    var children = getChildren(folder);
                    for (var i = 0; i < children.length; i++) {
                        var obj = children[i];
                        if(obj && obj.tagName && obj.tagName.toUpperCase() == tagname){
                          return obj;
                        }
                    }
                    alert("ERROR - No  "+tagname+" child found for this folder " + folder.tagName
                            + "=>"+ folder.innerHTML);
                    return null;
                }

                function getFolderWrapper(folder) {
                    return getFolderChildByTagname(folder, "SPAN");
                }
                function getFolderLabel(folder) {
                    return getFolderChildByTagname(folder, "LABEL");
                }

                function collapseFolder(folder) {
                    if (isFolder(folder)) {
                        getFolderLabel(folder).className = dirLabel;
                        getFolderWrapper(folder).className = dirCollapse;
                        folder.className = dir;
                    }
                }

                function expandFolder(folder) {
                    if (isFolder(folder)) {
                        folder.className = dirOn;
                        getFolderLabel(folder).className = dirLabelOn;
                        getFolderWrapper(folder).className = dirExpand;
                    }
                }

                function isFolder(obj) {
                    return (obj && obj.tagName && obj.tagName.toUpperCase() == 'DIV');
                }

                function isFolderExpanded(folder) {
                    return (getFolderWrapper(folder).className != dirCollapse);
                }

                function onOff(clickedFolder, e) {
                    e.cancelBubble=true;
                    var eventEle = (e.srcElement? e.srcElement : e.target);
                    if(eventEle.tagName == 'A'){
                       return;
                    }
                    
                    var isOn = isFolderExpanded(clickedFolder);
                    if (isOn) {
                        collapseFolder(clickedFolder);
                    } else {
                        var folders = getSiblings(clickedFolder);
                        for (var i = 0; i < folders.length; i++) {
            //                alert(folders[i].tagName + " => " + folders[i].innerHTML)
                            collapseFolder(folders[i]);
                        }
            //            alert(clickedFolder.tagName)
                        expandFolder(clickedFolder);
                    }
                }

            
            ]]>
        </script>
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="dir">
        <div class='dir' onclick="onOff(this, event);">
            <label class='dirLabel'>
                <xsl:value-of select="@name"/>
            </label>
            <span class='dirCont hide'>
                <xsl:apply-templates/>
            </span>
        </div>
    </xsl:template>

    <xsl:template match="link">
        <a class='dirLink' target="dyn" href="{@id}">
            <xsl:value-of select="@name"/>
        </a>
    </xsl:template>


</xsl:stylesheet>